<template>
    <div class="userCenter">
        <el-container class="user-content">
            <el-header width="960px">
                <div class="userImg">
                    <img src="../../assets/img/home/彭于晏.jpg" alt="" />
                    <div class="userName">SHENQI</div>
                </div>
                <div class="userMsg">
                    <div>生日：1998年08月12日</div>
                    <div>职业：产品经理</div>
                    <div>简介：这是一段简介，这是一段关于用户的简介</div>
                </div>
                <div class="userMsgEdit" @click="editInfo">
                    <img src="../../assets/img/userCenter/edit.png" alt="" />
                    <div class="edit">编辑资料</div>
                </div>
                <div class="icon">
                    <img src="../../assets/img/userCenter/daka.png" alt="" />
                </div>
            </el-header>
            <el-container>
                <el-aside width="146px">
                    <ul class="user-aside active">
                        <li
                            :class="{ active: actived == item.title }"
                            @click="changeTags(index, item.title)"
                            class="aside-item"
                            v-for="(item, index) in asideData"
                            :key="index"
                        >
                            {{ item.title }}
                        </li>
                    </ul>
                </el-aside>
                <el-main>
                    <router-view />
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script>
export default {
    data() {
        return {
            actived: "我的项目",
            asideData: [
                {
                    title: "我的项目",
                    url: "/user/myProject",
                },
                {
                    title: "我的练习",
                    url: "/user/myPractice",
                },
                {
                    title: "我的wiki",
                    url: "/user/myWiki",
                },
                {
                    title: "我的成就",
                    url: "/user/myAchievement",
                },
                {
                    title: "我的积分",
                    url: "/user/myIntegral",
                },
            ],
        };
    },
    components: {},
    created() {},
    mounted() {},
    methods: {
        changeTags(i, j) {
            // console.log(i,j)
            this.$router.push(this.asideData[i].url);
            this.actived = j;
        },
        editInfo(){
            this.$router.push('/editUserInfo');
        }
    },
};
</script>

<style lang='scss' scoped>
@import "../../assets/css/personalCenter/personalCenter.scss";
</style>